<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>教师个人信息</title>
<link href="../../css/teachersty.css" th:href="@{/static/css/teachersty.css}" rel="stylesheet">
<!-- 引入bootstrap样式 -->
<link href="../../css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
<!-- jquery -->
<script src="../../js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
<script src="../../js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}"></script>
</head>
<body>
	<div style="padding-top: 8px;padding-right: 15px;float: right;">
		<button class="btn btn-warning btn-sm" id="changePwd" data-toggle="modal" data-target="#myModal">修改密码</button>
	</div>
	<div class="cmtitle">个人信息</div>
	<div class="cmline"></div>
	<div class="card">
		<div style="width: 200px;margin: 0px auto;padding-top: 20px;">
			<div>教师号：<input disabled="disabled" class="form-control" id="mid"/></div><br>
			<div>姓名：<input disabled="disabled" class="form-control" id="name"/></div><br>
			<div>邮箱：<input disabled="disabled" class="form-control" id="email"/></div><br>
			<div>联系电话：<input disabled="disabled" class="form-control" id="phoneNum"/></div>
			<div style="width: 100%;margin: 0px auto;margin-top: 30px;float: left;">
				<button class="btn btn-primary btn-sm" id="saveInfo">保存更改</button>
				<button class="btn btn-info btn-sm" id="phoneEdit" style="float: right;">编辑</button></div>
		</div>
	</div>
	
	<!-- 修改密码模态框 -->
	<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" style="width: 50%;margin: 0px auto;">
	        <div class="modal-content">
	          <div class="modal-header">
	            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	            <h4 class="modal-title">修改密码</h4>
	          </div>
	          <div class="modal-body">
	            <div>旧密码：<input class="form-control" type="password" placeholder="密码长度至少6位" id="oldPwd"/></div>
				<div>新密码：<input class="form-control" type="password" placeholder="密码长度至少6位" id="newPwd"/></div>
				<div>确认密码：<input class="form-control" type="password" placeholder="密码长度至少6位" id="confirmPwd"/></div>
	          </div>
	          <div class="modal-footer">
	            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
	            <button class="btn btn-primary" type="button" id="updatePwdBtn">提交</button>
	          </div>
	        </div><!-- /.modal-content -->
	      </div><!-- /.modal-dialog -->
	</div>
	
	
	<script type="text/javascript">
		//是否含有中文（也包含日文和韩文）
		function isChineseChar(str){   
		   var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
		   return reg.test(str);
		}
		//同理，是否含有全角符号的函数
		function isFullwidthChar(str){
		   var reg = /[\uFF00-\uFFEF]/;
		   return reg.test(str);
		} 
		
		$(function(){
			var uid = $("#uid",parent.document).val();
			//初始化个人信息
			$.ajax({
				url : "searchMyInfo", // 请求目标
				type : "GET", // 请求类型 POST(加密) 或者 GET(默认)
				data : {tid : uid},
				dataType : 'json',
				async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
				cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
				success : function(data) {
					var teacherInfo = data.teacherInfo;
					$("#mid").val(teacherInfo.id);
					$("#name").val(teacherInfo.name);
					$("#email").val(teacherInfo.email);
					$("#phoneNum").val(teacherInfo.phoneNumber);
				}
			});
		
			$("#saveInfo").attr('disabled',true);
			//是否编辑
			$("#phoneEdit").click(function(){
				$('#phoneNum').removeAttr("disabled");
				$('#email').removeAttr("disabled");
				$("#saveInfo").attr('disabled',false);
			});
		
			//是否保存更改
			$('#saveInfo').click(function(){
				//验证邮箱和电话号码格式
				//验证手机号码是否有效
				 var phoneNumreg=/^[1][3,4,5,7,8][0-9]{9}$/;
				 var phoneNum = $("#phoneNum").val();
				 if(!phoneNumreg.test(phoneNum)){
				 	alert("您输入的手机号码有误，请重新输入");
				 	return false;
				 }
				 
				//验证邮箱格式
				var emailReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/
				var email = $("#email").val();
				if(!emailReg.test(email)){
					alert("您输入的邮箱有误，请重新输入");
					return false;
				}
			
				var isOK = confirm("确认保存吗？");
				if(isOK == true){
					$('#phoneNum').attr("disabled","disabled");
					$('#email').attr("disabled","disabled");
					$(this).attr('disabled',true);
					//ajax修改
					$.ajax({
						url : "updateInfo", // 请求目标
						type : "GET", // 请求类型 POST(加密) 或者 GET(默认)
						data : {tid : uid,email:email,phoneNumber:phoneNum},
						dataType : 'text',
						async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
						cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
						success : function(data) {
							alert(data);
						}
					});
					
				}else{
					return false;
				}
			});
			
			//旧密码编辑框失去焦点，检查密码是否与原密码一致
			var oldPwd;
			var newPwd;
			var confirmPwd;
			$("#oldPwd").blur(function(){
				oldPwd = $(this).val();
				$.ajax({
					url : "checkPassword", // 请求目标
					type : "GET", // 请求类型 POST(加密) 或者 GET(默认)
					data : {
						tid : uid,oldPwd:oldPwd
					},
					dataType : 'text',
					async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
					cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
					success : function(data) {
						if(data == "旧密码输入正确"){
							alert(data);
						}else{
							$("#oldPwd").val("");
							alert(data);
						}
					}
				});
			});
			
			//修改密码
			$("#updatePwdBtn").click(function(){
				newPwd = $("#newPwd").val();
				confirmPwd = $("#confirmPwd").val();
				oldPwd = $("#oldPwd").val();
				//检验密码长度
				if(newPwd.length < 6){
					alert("新密码长度至少6位");
					return false;
				}
				//检验中文
				if(isChineseChar(newPwd)){
					alert("新密码不能带有中文");
					return false;
				}
				//检验全角符号
				if(isFullwidthChar(oldPwd)){
					alert("新密码带有全角符号，请重新输入");
					return false;
				}
				//验证新密码和旧密码是否一致
				if(newPwd == oldPwd){
					alert("新密码与旧密码一致，请重新输入");
					return false;
				}
				//验证两次新密码输入是否一致
				if(newPwd != confirmPwd){
					alert("两次密码输入不一致，请重新输入");
					return false;
				}
				if(oldPwd != "" && confirmPwd != "" && newPwd != ""){
					$.ajax({
						url : "updatePassword", // 请求目标
						type : "post", // 请求类型 POST(加密) 或者 GET(默认)
						data : {
							tid : uid,newPwd:newPwd
						},
						dataType : 'text',
						async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
						cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
						success : function(data) {
							alert(data);
							$("#logout",parent.document).click();
						}
					});
				}else{
					alert("请输入完整信息");
					return false;
				}
			});
		});
	</script>
</body>
</html>